<template>
  <div class="container-big flexcolumn">
    <CommnityHeader
      title="自动踢人"
      :type="4"
      :showenterprise="false"
      :showexample="false"
      @handleApplicate="handleApplicate"
    />
    <div class="content-big flex">
      <template v-if="dataList.length||newPlan">
        <div class="content-left">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            class="flexbetween bg_fff p-10 fborderb"
          >
            <div class="flex aligncenter">
              <el-button
                v-hasPermi="['system:autokick:addplan']"
                type="primary"
                size="small"
                @click="handerAddTask"
                class="addbutton"
              >
                <i class="el-icon-plus mr-8"></i>新方案
              </el-button>
              <el-button
                v-hasPermi="['system:autokick:whitelist']"
                size="small"
                @click="handleWhite"
                class="addbutton mr-8 ml-8"
              >
                白名单
              </el-button>
              <el-form-item prop="name" class="mb-0 mr-0">
                <el-input
                  placeholder="搜任务"
                  v-model="queryParams.name"
                  @keyup.enter.native="handleQuery"
                  class="x-input-select"
                  style="width: 120px"
                >
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </div>
          </el-form>
          <div class="listbox p-12">
            <div
              v-if="newPlan"
              class="content-item bg_fff p-12 commhover br_4 mb-8"
              :class="{ active: rowItem && newPlan.id == rowItem.id }"
            >
              <div class="content-top flexbetween c_text2">
                <div class="title line_h_22">{{ newPlan.title || "--" }}</div>
              </div>
              <div class="line_h_22 c_text3 f-12">
                id:{{ newPlan.id || "--" }}
              </div>
            </div>
            <div
              v-for="(item, index) in dataList"
              :key="index"
              class="content-item bg_fff p-12 commhover br_4 mb-8"
              :class="{ active: rowItem && item.id == rowItem.id }"
              @click="handleItem(item)"
            >
              <div class="content-top flexbetween c_text2">
                <div class="title line_h_22">{{ item.title || "--" }}</div>
                <div class="mgt f-14 bg_fff flex aligncenter br_4">
                  <span @click="handleManage(item)">管理</span>
                  <el-dropdown
                    click="mr-10"
                    @command="handleCommand($event, item)"
                  >
                    <i class="el-icon-more pr-5 f-12"></i>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="b">重命名</el-dropdown-item>
                      <el-dropdown-item command="a">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <div class="line_h_22 c_text3 f-12">
                id:1106164
                <span class="pl-12">多规则</span>
              </div>
              <div class="line_h_22 c_text3 f-12">每日00:00至23:59生效</div>
            </div>
          </div>
        </div>
        <div class="content-right bg_fff">
          <addOrEditUserOperations
            :key="datakey"
            :info="rowItem"
            @handlewhite="handleWhite"
          ></addOrEditUserOperations>
        </div>
      </template>
      <div
        v-if="!dataList.length&&!newPlan"
        class="emptybox bg_fff w_full flexcolumn aligncenter"
      >
        <img src="@/assets/images/empty1.png" alt="" />
        <div class="mt-16 mb-16 c_text3">
          设置群内规则，可对发广告、恶意骚扰的群成员做出惩罚
        </div>
        <el-button type="primary" size="small" @click="handleAddFirst">新建方案</el-button>
      </div>
    </div>
    <!-- 设置-->
    <editSendSettings
      v-if="showEditSendSettings"
      :visableIf.sync="showEditSendSettings"
    ></editSendSettings>
    <!-- 管理 -->
    <plan-manage v-if="openmanage" :visableIf.sync="openmanage" :row="mitem" />
    <select-plan v-if="showplan" :visableIf.sync="showplan" />
    <el-dialog
      title="修改方案名称"
      :visible.sync="showupdate"
      @close="handleCloseDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="430px"
    >
      <el-form
        ref="form"
        :model="updateform"
        :rules="rules"
        label-position="top"
        size="small"
      >
        <el-form-item label="方案名称：" prop="title">
          <el-input
            v-model="updateform.title"
            clearable
            placeholder="请输入方案名称，最长20个字"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="handleCloseDialog">取消</el-button>
        <el-button size="small" type="primary" @click="submitForm"
          >确认</el-button
        >
      </div>
    </el-dialog>
    
    <!-- 白名单 -->
    <WhiteList v-if="showwhite" :visableIf.sync="showwhite" />

    <el-dialog
      title="设置客户群"
      :visible.sync="showfirst"
      @close="handleCloseFirst"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="430px"
    >
      <div class="c_text">多号聚合模式下自动踢人仅支持踢人规则设置，具体生效的客户群需要应用后，至单号模式下各号下添加。</div>
      <div slot="footer">
        <el-button size="small" @click="handleContinue">继 续</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listUser, delUser } from "@/api/system/user";
import PlanManage from "../components/PlanManage.vue";
import SelectPlan from "@/components/UserGroupComp/SelectPlan.vue";
import CommnityHeader from "../components/CommnityHeader.vue";
import WhiteList from "./WhiteList.vue";
export default {
  name: "newUserOperationsList",
  components: {
    editSendSettings: () => import("../components/editSendSettings.vue"), //
    addOrEditUserOperations: () => import("./addOrEditUserOperations.vue"), //
    PlanManage, //方案管理
    SelectPlan, //批量应用
    CommnityHeader,
    WhiteList,
  },
  data() {
    return {
      showEditSendSettings: false,
      rowItem: null,
      datakey: "",
      dataList: [
        // { id: 1, title: "方案一" },
        // { id: 2, title: "方案二" },
      ],
      newPlan: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        id: null, //用户id
        userName1: null,
      },
      total: 8, // 总条数
      openmanage: false, //方案管理
      mitem: null,
      showplan: false,
      showupdate: false,
      updateform: {
        id: "",
        title: "",
      },
      rules: {
        title: [{ required: true, message: "请输入方案名称", trigger: "blur" }],
      },
      showwhite: false,
      showfirst: false
    };
  },
  created() {},
  methods: {
    handerAddTask() {
      if (!this.newPlan) {
        this.newPlan = {
          title: "新任务",
          id: -1,
          planName: "任务" + (this.dataList.length + 1),
        };
        this.handleItem(this.newPlan, "add");
      }
    },

    handleItem(item, type = "") {
      if (this.newPlan && !type) {
        this.$msgBox
          .showMsgBox({
            title: "现在离开将不保存新建任务",
            content: "",
          })
          .then(() => {
            this.newPlan = null;
            this.handleItem(item);
          })
          .catch(() => {});
      } else {
        this.rowItem = item;
        this.datakey = Date.now();
      }
    },

    handleSet() {
      this.showEditSendSettings = true;
    },

    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },

    handleManage(item) {
      this.mitem = item;
      this.openmanage = true;
    },

    handleApplicate() {
      this.showplan = true;
    },

    handleCommand(type, item) {
      switch (type) {
        case "a":
          this.handleDelete(item);
          break;
        case "b":
          this.updateform.id = item.id;
          this.updateform.title = item.title;
          this.showupdate = true;
          break;
        default:
          break;
      }
    },

    handleCloseDialog() {
      this.showupdate = false;
    },

    submitForm() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.$message.success("修改成功");
        this.handleCloseDialog();
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$msgBox
        .showMsgBox({
          title: "提示",
          content:
            "此处删除会同步删除已应用到各个企微号下的该入群欢迎语任务，请谨慎操作。",
        })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },

    handleWhite() {
      this.showwhite = true;
    },

    handleAddFirst(){
      this.showfirst = true
    },

    handleCloseFirst(){
      this.showfirst = false
    },

    handleContinue(){
      this.handleCloseFirst()
      this.handerAddTask()
    }
  },
};
</script>
<style lang="scss" scoped>
.container-big {
  height: calc(100vh - 48px);
}
.content-big {
  height: calc(100% - 46px);
  .content-left {
    width: 310px;
    height: 100%;
    .setbox {
      width: 28px;
      height: 28px;
      border-radius: 2px;
      border: 1px solid #e9e9e9;
    }
    .content-item {
      border: 1px solid #e9e9e9;
      &.active {
        border: 1px solid #3070ff;
        background: #ebf2ff;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
      }
      .mgt {
        border: 1px solid #eee;
        height: 24px;
        line-height: 24px;
        span {
          padding: 0 7px;
          margin-right: 5px;
          border-right: 1px solid #eee;
        }
      }
    }
  }
  .content-right {
    flex: 1;
    border-left: 1px solid #e9e9e9;
    width: calc(100% - 310px);
  }
}
.listbox {
  height: calc(100% - 52px);
  overflow-y: auto;
}
.fborderb {
  height: 50px;
  border-bottom: 1px solid #e9e9e9;
}
.addbutton {
  padding: 8px 10px;
}
.emptybox {
  padding-top: 100px;
  padding-bottom: 100px;
  margin: 20px;
  height: 380px;
  img {
    width: 90px;
    height: 90px;
  }
}
</style>
